<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>投诉评价</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="yes" name="apple-touch-fullscreen">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no,email=no" name="format-detection">
		<!--[if lt IE 9]> 
		<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
		<![endif]-->
		<script type="text/javascript" src="../../js/init.js"></script>
		<link rel="stylesheet" href="../../font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<script type="text/javascript" src="../../font/iconfont.js"></script>
		<style type="text/css">
			html {
				width: 100%;
				height: 100%;
				/*background-color: #f6f6f6;*/
			}
			
			#btns {
				position: absolute;
				font-size: 0.3rem;
				width: 100%;
				height: 0.7rem;
				border-bottom: 1px solid #dbdbdb;
				color: #666;
			}
			
			#btns text {
				display: inline-block;
				position: absolute;
				width: 50%;
				height: 0.7rem;
				line-height: 0.7rem;
				text-align: center;
				font-size: 0.3rem;
			}
			
			#btns #left {
				left: 0;
			}
			
			#btns #right {
				right: 0;
			}
			
			.color {
				color: #2fabd4;
				border-bottom: 2px solid #428bca;
			}
			
			.bg {
				display: block;
				height: 0.9rem;
				background-color: #f6f6f6;
			}
			
			#divs .div {
				display: none;
			}
			
			.search {
				height: 0.86rem;
				border-top: 1px solid #d2d2d2;
				border-bottom: 1px solid #d2d2d2;
				background-color: #eee;
				position: relative;
			}
			
			.search input {
				position: absolute;
				top: 0.16rem;
				height: 0.54rem;
				line-height: 0.54rem;
				margin: 0 7%;
				border-radius: 0.27rem;
				width: 86%;
				border: none;
				padding-left: 35%;
			}
			
			.search .iconfont {
				position: absolute;
				top: 0.28rem;
				left: 37%;
				z-index: 2;
				color: #999;
			}
			
			.div textarea {
				display: block;
				width: 7.1rem;
				max-width: 7.1rem;
				height: 4.16rem;
				margin: 0.3rem 0.2rem 1.03rem;
				border: 1px solid #d2d2d2;
				border-radius: 0.1rem;
				padding: 0.1rem;
				background-color: #fff;
			}
			
			.div button {
				color: #fff;
				background-color: #428bca;
				border-radius: 0.1rem;
				text-align: center;
				font-size: 0.3rem;
				width: 5.1rem;
				height: 0.7rem;
				line-height: 0.7rem;
				margin: 0 1.2rem;
				border: none;
			}
			
			.div .con {
				display: block;
				padding: 0 0.2rem;
				color: #666;
				font-size: 0.3rem;
				line-height: 0.68rem;
				height: 0.68rem;
				border-bottom: 1px solid #d2d2d2;
				border-top: 1px solid #d2d2d2;
				position: relative;
			}
			.div .con .iconfont {
				position: absolute;
				right: 0.2rem;
			}
			#SH  .cont {
				font-size: 0.32rem;
			}
			
			#showIcon {
				background-color: #fff;
				position: absolute;
				top:0rem;
				text-align: center;
				width: 100%;
			}
			.conT {
				position: absolute;
				width: 100%;
				left: 0;top: 0;
				text-align: center;
			}
			#showIcon .cont {
				height: 0.5rem;
				line-height: 0.5rem;
			}
			#SH {
				position: absolute;
				height: 100%;
				width: 100%;
				background-color: rgba(0,0,0,0.5);
				top: 2.5rem;
			}
			.titl {
				display: none;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var btns = document.getElementById("btns").getElementsByTagName("text");
				var divs = document.getElementById("divs").getElementsByClassName("div");
				for(var i = 0; i < btns.length; i++) {
					btns[i].index = i; //自定义属性，用于关联下面的大盒子
					btns[i].onclick = function() {

						for(var j = 0; j < btns.length; j++) {
							//把所有的button清空类名
							btns[j].className = "";
						}
						//点击的那个盒子添加指定类名
						this.className = "color";
						for(var i = 0; i < divs.length; i++) {
							//先让底下的div全部隐藏
							divs[i].style.display = "none";
						}
						//然后给当前所点击按钮相关联的盒子添加指定属性
						divs[this.index].style.display = "block";
					}
				}
			}
		</script>
	</head>

	<body>
		<header>
			<span></span>
			<text class="title">门诊缴费</text>
			<text class="iconfont icon-llmainpageback" id="back"></text>
			<text class="iconfont icon-iconfontclosesmall"></text>
			<text class="iconfont icon-gengduo"></text>
		</header>
		<section class="titl" id="SH" >
			<!--选择项-->
			<div  id="showIcon">
				<div class="cont">
					<text class="one">口腔溃疡</text>
					<text class="iconfont icon-xuanzedui"></text>
				</div>
				<div class="cont">
					<text class="one">头疼</text>
					<text class="iconfont"></text>
				</div>
				<div class="cont">
					<text class="one">腰疼</text>
					<text class="iconfont"></text>
				</div>
				<div class="cont">
					<text class="one">肾疼</text>
					<text class="iconfont"></text>
				</div>
			</div>
		</section>

		<section class="contain">
			<div id="btns">
				<text class="color" id="left">医疗服务评价</text>
				<text id="right">投诉</text>
			</div>
			<span class="bg"></span>
			<div id="divs">

				<div class="div" style="display: block;">
					<div id="show">
						<div class="con">
							<text class="C">选择就诊项目</text>
							<text class="conT">口腔溃疡</text>
							<text class="iconfont icon-tiaozhuan"></text>
						</div>

						<textarea name="" rows="" cols="" placeholder="输入投诉内容"></textarea>
						<button>提交</button>
					</div>
					<div class="div">
						<form class="search" action="">
							<text class="iconfont icon-search"></text>
							<input type="search" placeholder="搜索投诉员工" />
						</form>
						<textarea name="" rows="" cols="" placeholder="输入投诉内容"></textarea>
						<button>提交</button>
					</div>
				</div>
			</div>
		</section>
	</body>
	<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//控制小勾显示
//		document.getElementsByClassName("con")[0].onclick = function() {
//			var show = document.getElementById("show");
//			removeClass(show, "show");
//			console.log('aaaa')
//		}
//		console.log(show)
//		
		//控制内容显示
		var conts = document.getElementsByClassName("cont");
		var icons = document.querySelectorAll(".cont .iconfont");
		var texts = document.querySelectorAll(".cont .one");
		for(var i = 0; i < conts.length; i++) {
			conts[i].i = i;
			conts[i].onclick = function() {
				for(var j = 0; j < icons.length; j++) {
					removeClass(icons[j], 'icon-xuanzedui');
				}
				console.log(this.i)
				addClass(icons[this.i], "icon-xuanzedui");

				document.querySelector(".con .conT").innerText = texts[this.i].innerText;

				console.log(texts[this.i].innerText)
//				
//				$(this).click(function(){
//					console.log($(this))
//					$("#SH").removeClass("titl")
//				})
				var showIcon = document.getElementById("showIcon");
				console.log(showIcon)
				showIcon.onclick = function(){
					var Sh = document.getElementById("SH");
					console.log(Sh)
					addClass(Sh,"titl")
				}
////				addClass(show, "show");
//				$("#show").click(function(){
//					$("#SH").removeClass("titl")
//				})
			}
		}
		//控制选择框显示
		 $("#show").click(function(){
			console.log("aaa")
			$("#SH").toggleClass("titl")
		});
	</script>

</html>